<template>
  <div class="home-container">
    <div class="user-info">
      <img class="avatar" :src="user.avatar" alt="avatar" />
      <div class="nickname">{{ user.nickname }}</div>
    </div>
    <el-button type="primary" class="chat-btn" @click="goChat">进入AI聊天</el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const user = ref({
  nickname: '智周用户',
  avatar: 'https://api.dicebear.com/7.x/bottts/svg?seed=aiuser'
})

function goChat() {
  router.push('/chat')
}
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e0e7ff 0%, #f8fafc 100%);
}
.user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 32px;
}
.avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.nickname {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
}
.chat-btn {
  width: 200px;
  height: 48px;
  font-size: 1.2rem;
  border-radius: 8px;
}
</style> 